<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

        /*绘制圆弧*/
        /*确定圆心  坐标 x y*/
        /*确定圆半径  r */
        /*确定起始绘制的位置和结束绘制的位置,这两个就能确定弧的长度和位置  startAngle endAngle   弧度*/
        /*取得绘制的方向 direction 默认是顺时针 false 逆时针 true */

        /*在中心位置画一个半径150px的圆弧左下角*/
        var w = ctx.canvas.width;
        var h = ctx.canvas.height;
        //第一个参数: 圆的x坐标
        //第二个参数: 圆的y坐标
        //第三个参数: 圆的半径 单位是px
        //第四个参数: 绘制的位置 单位是弧度 (0弧度==圆最右边位置,圆最下边的位置=== π/2 弧度, 依次顺时针转90°就加 0.5π)
        //第五个参数: 绘制的方向(false,true): 默认是顺时针(false), 逆时针(true)
        //绘制的位置可以传 负数，正数是顺时针的值，
        ctx.arc(w/2, h/2, 150, 1.5*Math.PI, 2*Math.PI);
        ctx.stroke();


    </script>
    
</body>
</html>